<template>
  <div>
    <pageMain padding="0px">
      <div class="overall-table-screen-options">
        <div class="overall-table-screen-options-left">
          <ul class="overall-table-screen-options-left-ul">
            <li class="overall-table-screen-options-left-ul-li">
              <div class="overall-table-screen-options-left-ul-li-key">
                用户
              </div>
              <div class="overall-table-screen-options-left-ul-li-value">
                <el-input
                  size="mini"
                  v-model="pageData.where.username"
                  placeholder="请输入搜索字典"
                ></el-input>
              </div>
            </li>
            

            <li class="overall-table-screen-options-left-ul-li">
              <div class="overall-table-screen-options-left-ul-li-key">
                状态
              </div>
              <div class="overall-table-screen-options-left-ul-li-value">
                <el-select
                  size="mini"
                  v-model="pageData.where.reliable"
                  placeholder="行为状态"
                >
                  <el-option
                    v-for="state in $dictionary.get('DICTIONARY_STATE')"
                    :label="state.label"
                    :value="state.value"
                    :key="state.value"
                  ></el-option>
                </el-select>
              </div>
            </li>
          </ul>
        </div>
         <ul
          class="overall-table-screen-options-right overall-table-screen-options-right-row"
        >
          <li
            class="overall-table-screen-options-right-li"
            @click="clickSearch"
          >
            <el-button size="mini" plain type="primary" icon="el-icon-search"
              >搜索</el-button
            >
          </li>
          <li class="overall-table-screen-options-right-li" @click="clickReset">
            <el-button size="mini" plain type="primary" icon="el-icon-refresh"
              >重置</el-button
            >
          </li>
        </ul>
      </div>

      <div class="overall-table-surround">
        <div class="overall-table-surround-table">
          <el-table
            :size="tableSize"
            :border="tableBorder"
            :data="dictionaryList"
          >
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column prop="title" label="用户" width="140">
            </el-table-column>
            <el-table-column prop="create_date" label="类型" width="140">
            </el-table-column>
            <el-table-column prop="update_date" label="行为" width="140">
            </el-table-column>
            <el-table-column prop="comment" label="操作时间" width="180">
            </el-table-column>
            <el-table-column prop="comment" label="备注" width="180">
            </el-table-column>
            <el-table-column
              prop="state"
              label="状态"
              align="center"
            >
              <template slot-scope="scope">
                {{ $dictionary.extend("DICTIONARY_STATE", scope.row.state) }}
              </template>
            </el-table-column>

            
          </el-table>
        </div>
      </div>

      <div class="overall-table-pagination">
        <div class="overall-table-pagination-left">
          <el-select v-model="pageData.limit" placeholder="请选择" size="mini">
            <el-option
              v-for="item in pageLimit"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="overall-table-pagination-right">
          <el-pagination background layout="prev, pager, next" :total="1000">
          </el-pagination>
        </div>
      </div>
    </pageMain>
  </div>
</template>

<script>
import pageMain from "~/page-main/page-main.vue";
import tableAttrMixin from "@/mixins/table_attr";
import loadingMixin from "@/mixins/loading";
export default {
  mixins: [tableAttrMixin, loadingMixin],

  components: {
    pageMain,
  },
  data() {
    return {
      pageData: {
        page: 1,
        limit: 10,
        total: null,
        where: {},
      },
    };
  },
  methods: {
    // 点击查询
    clickSearch() {
      this.pageData.page = 1;
      this.getRoleList();
    },
    clickReset() {
      this.pageData.page = 1;
      for (let item of Object.keys(this.pageData.where)) {
        this.pageData.where[item] = null;
      }
      this.getRoleList();
    },
  },
};
</script>

<style></style>
